<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
          crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style type="text/css">
        @media (min-width: 768px) {
            #slider-sub {
                width: 250px;
                margin-top: 51px;
                position: absolute;
                z-index: 1;
                background: #052b64;
                height: 800px;
            }

            .mysearch {
                margin: 10px 0;
            }
        }
    </style>
</head>
<body>
<nav th:fragment="topbar2">
    <div >
        <div class="navbar-default navbar-collapse"  id="slider-sub">
            <ul class="nav" >
                <li>
                    <!--                搜索-->
                    <div class="input-group mysearch">
                        <input type="text" class="form-control"/>
                        <span class="input-group-btn">
                           <button type="button" class="btn btn-default">
                               <span class="glyphicon glyphicon-search"></span>
                           </button>
                       </span>
                    </div>
                </li>
                <li>
                    <!--                折叠展开-->
                    <a href="#sub1"  data-toggle="collapse">财务管理
                        <span class="glyphicon glyphicon-chevron-right pull-right" ></span></a>
                    <!--                子菜单-->
                    <ul id="sub1" class="nav collapse">
                        <li><a href="findAll"><span class="glyphicon glyphicon-info-sign"></span>&nbsp;信用卡管理</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;网贷管理</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;其他</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon glyphicon-remove-circle"></span>&nbsp;退出</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#sub2" data-toggle="collapse">学习规划
                        <!--                    折叠展开-->
                        <span class="glyphicon glyphicon-chevron-right pull-right" ></span></a>
                    <!--                子菜单-->
                    <ul id="sub2" class="nav collapse">
                        <li><a href="#"><span class="glyphicon glyphicon-info-sign"></span>&nbsp;阅读目标</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;锻炼技能</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;其他</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon glyphicon-remove-circle"></span>&nbsp;退出</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#sub3"  data-toggle="collapse">图形界面
                        <span class="glyphicon glyphicon-chevron-right pull-right" ></span></a>
                    <ul id="sub3" class="nav collapse">
                        <li><a href="#"><span class="glyphicon glyphicon-info-sign"></span>&nbsp;负债图表</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;理财收益</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;收支</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon glyphicon-remove-circle"></span>&nbsp;退出</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#sub4"  data-toggle="collapse">工作功能
                        <span class="glyphicon glyphicon-chevron-right pull-right" ></span></a>
                    <ul id="sub4" class="nav collapse">
                        <li><a href="#"><span class="glyphicon glyphicon-info-sign"></span>&nbsp;项目管理</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;人脉圈</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;待处理事项</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon glyphicon-remove-circle"></span>&nbsp;退出</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
</body>
</html>